<template>
	<div class="page-header-index-wide">
		<!--公告-->
		<a-row :gutter="24">
			<a-col :sm="24" :md="12" :xl="24" :style="{ marginBottom: '10px' }">
				<a-card :bordered="false" :body-style="{padding: '10px 20px'}">
					<div class="flex-r-ac">
						<div class="tit" style="width: 60px;">公告</div>
						<div class="txt">系统将于2023年07月24日16:00点进行升级服务 2023-07-24</div>
					</div>
				</a-card>
			</a-col>
		</a-row>

		<!--内容-->
		<a-row :gutter="24">
			<!--内容左-->
			<a-col :sm="24" :md="12" :xl="20" :style="{ marginBottom: '10px' }">
				<!--预警-->
				<a-card :bordered="false" :body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}" style="display: none;">
					<div class="flex-r-js-ac" style="width:'100%;">
						<div class="tit" style="width: 60px;">预警</div>
						<div class="flex-r-js-ac" style="width: calc(100% - 60px);">
							<div class="txt flex-r-ac" style="width: calc(100% - 100px);">
								<div v-for="(item,index) in warningList.slice(0,2)" :key="index" class="txtmore"
									style="width: 50%;">
									{{item.type === '1'?'库存预警:':item.type === '2'?'':''}}{{item.name}}
								</div>
							</div>
							<div class="more" @click.stop="tolink('toyujingmore')"
								style="width: 100px;text-align: right;">预警记录></div>
						</div>
					</div>
				</a-card>

				<!--数据概况-->
				<a-card :bordered="false" :body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<!-- <div class="tit">数据概况</div> -->
						<div class="box flex-r">
							<div v-for="(item,index) in dataList" :key="index" style="width: 30%;"
								:style="{marginRight:(index+1)%3 == 0 ?'0px':'5%' }">
								<div class="flex-r-js-ac">
									<div class="tit2">
										{{item.type === '1'?'供应商总数':item.type === '2'?'班组总数':item.type === '3'?'在职员工':''}}
									</div>
									<div class="txt">{{item.unit}}</div>
								</div>
								<div class="txt2" style="border-bottom: 0.5px solid #ddd;text-align: center;">
									{{item.count}}
								</div>
								<div class="txt3" style="text-align: center;" v-if="item.type != '3'">
									昨日新增:{{item.day_count}}</div>
							</div>
						</div>
					</div>
				</a-card>

				<!--主要物资统计-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="flex-r-js-ac">
							<div class="tit">主要物资统计</div>
							<div class="more" @click.stop="tolink('towuzimore')"
								style="width: 100px;text-align: right;">查看更多></div>
						</div>
						<div class="flex-r-ac" style="margin-top: 20px;">
							<div class="txt" style="margin-right: 10px;">选择项目:</div>
							<a-select placeholder="请选择项目" :value="model.projectName"
								@change="handleChange('project',$event)" style="width:300px">
								<a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
									{{item.label}}
								</a-select-option>
							</a-select>
						</div>
						<!--echarts柱状图-->
						<div id="charts" style="width: 100%;height:300px;"></div>
					</div>
				</a-card>

				<!--物资招采统计-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="flex-r-js-ac">
							<div class="tit">物资招采统计</div>
							<div class="more" @click.stop="tolink('towuzimore2')"
								style="width: 100px;text-align: right;">查看更多></div>
						</div>
						<div class="flex-r-ac" style="margin-top: 20px;margin-bottom: 20px;">
							<div class="txt" style="margin-right: 10px;">选择项目:</div>
							<a-select placeholder="请选择项目" :value="model.projectName1"
								@change="handleChange('project1',$event)" style="width:300px">
								<a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
									{{item.label}}
								</a-select-option>
							</a-select>
						</div>
						<a-table :columns="columns" :dataSource="zhaocaiList" :pagination="ipagination1" bordered
							style="margin: 0 auto;width: 100%;" @change="handleTableChange1">
						</a-table>
					</div>
				</a-card>

				<!--班组招采统计-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="flex-r-js-ac">
							<div class="tit">班组招采统计</div>
							<div class="more" @click.stop="tolink('tobanzumore')"
								style="width: 100px;text-align: right;">查看更多></div>
						</div>
						<div class="flex-r-ac" style="margin-top: 20px;margin-bottom: 20px;">
							<div class="txt" style="margin-right: 10px;">选择项目:</div>
							<a-select placeholder="请选择项目" :value="model.projectName2"
								@change="handleChange('project2',$event)" style="width:300px">
								<a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
									{{item.label}}
								</a-select-option>
							</a-select>
						</div>
						<a-table :columns="columns" :dataSource="banzuList" :pagination="ipagination2" bordered
							style="margin: 0 auto;width: 100%;" @change="handleTableChange2">
						</a-table>
					</div>
				</a-card>

				<!--自有设备统计-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="flex-r-js-ac">
							<div class="tit">自有设备统计</div>
							<div class="more" @click.stop="tolink('toshebeimore')"
								style="width: 100px;text-align: right;">查看更多></div>
						</div>
						<div class="flex-r-ac" style="margin-top: 20px;margin-bottom: 20px;">
							<div class="txt" style="margin-right: 10px;">选择项目:</div>
							<a-select placeholder="请选择项目" :value="model.projectName3"
								@change="handleChange('project3',$event)" style="width:300px">
								<a-select-option v-for="(item,index) in levelOneOptions" :key="index" :value="item">
									{{item.label}}
								</a-select-option>
							</a-select>
						</div>
						<a-table :columns="columns3" :dataSource="shebeiList" :pagination="ipagination3" bordered
							rowKey="id" style="margin: 0 auto;width: 100%;" @change="handleTableChange3">
							<template slot="status" slot-scope="text,record">
								<span
									:style="{color:text === '1'?'#ff4d4f':text === '2'?'#FF9900':text === '3'?'#0066cc':''}">{{text === '1'?'较差':text === '2'?'一般':text === '3'?'良好':''}}</span>
							</template>
							<template slot="state" slot-scope="text,record">
								<span
									:style="{color:text === '1'?'#FF9900':text === '2'?'#ff4d4f':text === '3'?'#0066cc':''}">{{text === '1'?'闲置':text === '2'?'待修':text === '3'?'在用':''}}</span>
							</template>
						</a-table>
					</div>
				</a-card>
			</a-col>

			<!--内容右-->
			<a-col :sm="24" :md="12" :xl="4" :style="{ marginBottom: '10px' }">

				<!--功能助手-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="tit" style="text-align: center;margin-bottom: 20px;">功能助手</div>
						<div class="nav-list flex-r-ac" style="flex-wrap: wrap;">
							<div v-for="(item,index) in navList" :key="index" @click.stop="tolink('tonav',item,index)"
								style="width: 48%;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-bottom: 20px;"
								:style="{marginRight:(index+1)%2 === 0?'0':'4%'}">
								<!-- <img :src="item.src" style="width: 50px;max-width: 100%;" /> -->
								<a-icon type="folder" style="font-size: 45px;color:#0066cc;" />
								<div class="txt">{{item.name}}</div>
							</div>
						</div>
					</div>
				</a-card>

				<!--文件管理-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="tit" style="text-align: center;margin-bottom: 20px;">文件管理</div>
						<div class="nav-list flex-d">
							<div v-for="(item,index) in fileList.slice(0,5)" :key="index"
								style="width: 100%;display: flex;flex-direction: column;color:#0066cc;line-height: 25px;margin-bottom: 10px;">
								{{item.name}}
							</div>
						</div>
						<a-button type="primary" @click="tolink('tofilemore')" style="height:50px;">查看全部文件</a-button>
					</div>
				</a-card>

				<!--下载二维码-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="tit" style="text-align: center;margin-bottom: 20px;">下载二维码</div>
						<div class="nav-list flex-d">
							<div v-for="(item,index) in qrcodeList" :key="index"
								style="width: 100%;display: flex;flex-direction: column;color:#0066cc;line-height: 25px;margin-bottom: 10px;">
								<img src="~@/assets/toapp.png" style="width: 100px;max-width: 100%;margin: 0 auto;"
									v-if="index === 0" />
								<img src="~@/assets/toh5.png" style="width: 100px;max-width: 100%;margin: 0 auto;" v-if="index === 1" />
								<div class="txt" style="text-align: center;">{{item.name}}</div>
							</div>
						</div>
					</div>
				</a-card>

				<!--联系客服-->
				<a-card :loading="loading" :bordered="false"
					:body-style="{padding: '10px 20px',margin:'0 0 10px 0',width:'100%'}">
					<div class="flex-c" style="width:'100%;">
						<div class="tit" style="text-align: center;margin-bottom: 20px;">联系客服</div>
						<div class="flex-r-ac">
							<!-- <a-button type="primary" style="height:40px;"><a-icon type="phone" style="color: #fff;font-size: 24px;"/></a-button> -->
							<div
								style="width: 30px;height:30px;border-radius: 4px;background: #0066cc;display: flex;justify-content: center;align-items: center;margin-right: 20px;">
								<a-icon type="phone" theme="filled" style="color: #fff;font-size: 24px;" />
							</div>
							<div class="tit">{{phone}}</div>
						</div>
					</div>
				</a-card>

			</a-col>
		</a-row>
	</div>
</template>

<script>
	import {
		httpAction,
		getAction,
		postAction
	} from '@/api/manage';
	import {
		filterObj
	} from '@/utils/util';
	export default {
		name: "IndexChart",
		components: {

		},
		data() {
			return {
				warningList: [{
					id: 1,
					name: 'xxx水泥即将达到最高上限 2023-02-24',
					type: '1'
				}, {
					id: 2,
					name: 'xxx钢筋即将低于最低限 2023-02-25',
					type: '2'
				}],
				dataList: [{
					id: 1,
					type: '1',
					unit: '家',
					count: 0,
					day_count: 0
				}, {
					id: 2,
					type: '2',
					unit: '家',
					count: 0,
					day_count: 0
				}, {
					id: 3,
					type: '3',
					unit: '人',
					count: 0,
					day_count: 0
				}],
				levelOneOptions: [],
				model: {
					projectName: '',
					projectId: '',
					projectName1: '',
					projectId1: '',
					projectName2: '',
					projectId2: '',
					projectName3: '',
					projectId3: '',
				},
				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 16
					},
				},
				columns: [{
						title: '序号',
						dataIndex: 'index',
						key: 'index',
						align: 'center',
						width: '5%',
						customRender: function(t, r, index) {
							return parseInt(index) + 1
						},
					}, {
						title: '发标时间',
						dataIndex: 'issueTime',
						align: 'center',
						width: '15%',
						customRender: function(text) {
							return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
						},
					}, {
						title: '招标名称',
						dataIndex: 'name',
						align: 'center',
						width: '20%',
					}, {
						title: '项目',
						dataIndex: 'projectName',
						align: 'center',
						width: '20%',
					}, {
						title: '结标时间',
						dataIndex: 'traneIncTime',
						align: 'center',
						width: '15%',
						customRender: function(text) {
							return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
						},
					},
					{
						title: '状态',
						dataIndex: 'status_dictText',
						align: 'center',
						width: '10%',
					},
					{
						title: '已报价商家数',
						dataIndex: 'number',
						align: 'center',
						width: '15%',
					}
				],
				columns3: [{
						title: '设备编号',
						dataIndex: 'number',
						align: 'center',
						width: '15%',
					}, {
						title: '设备名称',
						dataIndex: 'name',
						align: 'center',
						width: '15%',
					}, {
						title: '设备型号',
						dataIndex: 'model',
						align: 'center',
						width: '15%',
					}, {
						title: '归属项目',
						dataIndex: 'model',
						align: 'center',
						width: '15%',
					}, {
						title: '当前存放位置',
						dataIndex: 'address',
						align: 'center',
						width: '20%',
					},
					{
						title: '设备状态',
						align: 'center',
						width: '10%',
						dataIndex: 'status',
						scopedSlots: {
							customRender: 'status'
						},
					},
					{
						title: '使用状态',
						align: 'center',
						width: '10%',
						dataIndex: 'state',
						scopedSlots: {
							customRender: 'state'
						},
					}
				],
				zhaocaiList: [],
				banzuList: [],
				shebeiList: [],
				ipagination1: {
					current: 1,
					pageSize: 10,
					pageSizeOptions: ['10', '20', '30'],
					showTotal: (total, range) => {
						return range[0] + "-" + range[1] + " 共" + total + "条"
					},
					showQuickJumper: true,
					showSizeChanger: true,
					total: 0
				},
				ipagination2: {
					current: 1,
					pageSize: 10,
					pageSizeOptions: ['10', '20', '30'],
					showTotal: (total, range) => {
						return range[0] + "-" + range[1] + " 共" + total + "条"
					},
					showQuickJumper: true,
					showSizeChanger: true,
					total: 0
				},
				ipagination3: {
					current: 1,
					pageSize: 10,
					pageSizeOptions: ['10', '20', '30'],
					showTotal: (total, range) => {
						return range[0] + "-" + range[1] + " 共" + total + "条"
					},
					showQuickJumper: true,
					showSizeChanger: true,
					total: 0
				},
				queryParam: {},
				isorter1: {
					column: 'createTime',
					order: 'desc',
				},
				filters1: {},
				isorter2: {
					column: 'createTime',
					order: 'desc',
				},
				filters2: {},
				isorter3: {
					column: 'createTime',
					order: 'desc',
				},
				filters3: {},
				navList: [{
					id: 1,
					name: '物资管理'
				}, {
					id: 2,
					name: '招采管理'
				}, {
					id: 3,
					name: '数据报表'
				}, {
					id: 4,
					name: '文件管理'
				}, {
					id: 5,
					name: '设备管理'
				}, {
					id: 6,
					name: '人员管理'
				}, {
					id: 7,
					name: '会签管理'
				}, {
					id: 8,
					name: '消息管理'
				}],
				phone: '400-123-4567',
				fileList: [{
					id: 1,
					name: '工程项目信息系统说明书.docx'
				}, {
					id: 2,
					name: '工程项目信息系统说明书.docx'
				}, {
					id: 3,
					name: '工程项目信息系统说明书.docx'
				}, {
					id: 4,
					name: '工程项目信息系统说明书.docx'
				}, {
					id: 5,
					name: '工程项目信息系统说明书.docx'
				}],
				qrcodeList: [{
					id: 1,
					name: '安卓版',
					src: '~@/assets/toapp.png'
				}, {
					id: 2,
					name: 'H5移动端',
					src: './src/assets/toh5.png'
				}],
			}
		},
		created() {
			this.Dict1();
		},
		mounted() {

		},
		methods: {
			tolink(type, item, index) {
				if (type === 'toyujingmore') {
					//this.closeCurrent();
					this.$router.push({
						path: '/modules/materials/Earlywarningsetting',
					});
				} else if (type === 'towuzimore') {
					this.$router.push({
						path: '/modules/materials/WtMaterialsList',
					});
				} else if (type === 'towuzimore2') {
					this.$router.push({
						path: '/modules/recruit/MaterialRecruit',
					});
				} else if (type === 'tobanzumore') {
					this.$router.push({
						path: '/modules/recruit/TeamRecruit',
					});
				} else if (type === 'toshebeimore') {
					this.$router.push({
						path: '/modules/equipment/Deviceinformation',
					});
				} else if (type === 'tonav') {
					if (index == 0) {
						this.$router.push({
							path: '/modules/materials/WtMaterialsList',
						});
					} else if (index == 1) {
						this.$router.push({
							path: '/modules/recruit/MaterialRecruit',
						});
					} else if (index == 2) {
						this.$router.push({
							path: '',
						});
					} else if (index == 3) {
						this.$router.push({
							path: '/modules/file/Directory',
						});
					} else if (index == 4) {
						this.$router.push({
							path: '/modules/equipment/Devicetype',
						});
					} else if (index == 5) {
						this.$router.push({
							path: '/modules/personnel/Administrator',
						});
					} else if (index == 6) {
						this.$router.push({
							path: '/modules/HuiQianGuanLi/DanJuShenQi',
						});
					} else if (index == 7) {
						this.$router.push({
							path: '/modules/message/sysMessageList',
						});
					}
				}else if(type === 'tofilemore'){
					this.$router.push({
						path: '/modules/file/FileBenLook',
					});
				}
			},
			handleChange(type, item) {
				if (type === 'project') {
					this.model.projectName = item.label;
					this.model.projectId = item.value;
					this.Dict2();
				} else if (type === 'project1') {
					this.model.projectName1 = item.label;
					this.model.projectId1 = item.value;
					this.Dict3();
				} else if (type === 'project2') {
					this.model.projectName2 = item.label;
					this.model.projectId2 = item.value;
					this.Dict4();
				} else if (type === 'project3') {
					this.model.projectName3 = item.label;
					this.model.projectId3 = item.value;
					this.Dict5();
				}
				this.$forceUpdate();
			},
			//获取数据字典
			Dict1() {
				//项目列表
				getAction(`/statistics/buyerHome/getPojectList`).then((res) => {
					//getAction(`/countersign/wtCountersignTemplate/getProjectListBybillsTemplateName?billsTemplateName=${this.billsTemplateName}`).then((res) => {
					if (res.success) {
						let treeList = res.result;
						if (treeList && treeList.length > 0) {
							this.levelOneOptions = [...treeList].map((v) => ({
								...v,
								value: v.id,
								label: v.departName,
							}))
							this.model.projectId = this.levelOneOptions[0].value;
							this.model.projectId1 = this.levelOneOptions[0].value;
							this.model.projectId2 = this.levelOneOptions[0].value;
							this.model.projectId3 = this.levelOneOptions[0].value;
							this.model.projectName = this.levelOneOptions[0].label;
							this.model.projectName1 = this.levelOneOptions[0].label;
							this.model.projectName2 = this.levelOneOptions[0].label;
							this.model.projectName3 = this.levelOneOptions[0].label;
							this.Dict2();
							this.Dict3();
							this.Dict4();
							this.Dict5();
						}
						this.$forceUpdate();
					}
				})
				//首页
				getAction(`/statistics/buyerHome/getProfileData`).then((res) => {
					if (res.success) {
						this.dataList[0].count = res.result.supplierCount;
						this.dataList[1].count = res.result.classCount;
						this.dataList[2].count = res.result.userCount;
						this.dataList[0].day_count = res.result.yesterdayDateSupplierCount
						this.dataList[1].day_count = res.result.yesterdayClassCount;
						this.$forceUpdate();
					}
				})
			},
			//获取主要物资统计接口
			Dict2() {
				getAction(`/statistics/buyerHome/getProfileMaterialsData?projectId=${this.model.projectId}`).then((
					res) => {
					if (res.success) {
						let source = [];
						if (res.result && res.result.length > 0) {
							source = res.result.map((v) => ({
								product: v.platformProductName,
								'新入库': v.entranceCount,
								'出库数': v.deliveryCount,
								'剩余库存': v.residueCount,
							}));
						}
						this.init(source);
						this.$forceUpdate();
					}
				})
			},
			Dict3(arg) {
				if (arg === 1) {
					this.ipagination1.current = 1;
				}
				var params = this.getQueryParams('1'); //查询条件
				params.project = this.model.projectId1;
				//物资招采统计
				getAction(`/statistics/buyerHome/getMaterialsBiddingData`, params).then((res) => {
					if (res.success) {
						this.zhaocaiList = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination1.total = res.result.total;
						} else {
							this.ipagination1.total = 0;
						}
						this.$forceUpdate();
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			Dict4(arg) {
				if (arg === 1) {
					this.ipagination2.current = 1;
				}
				var params = this.getQueryParams('2'); //查询条件
				params.project = this.model.projectId2;
				//班组招采统计
				getAction(`/statistics/buyerHome/getClassBiddingData`, params).then((res) => {
					if (res.success) {
						this.banzuList = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination2.total = res.result.total;
						} else {
							this.ipagination2.total = 0;
						}
						this.$forceUpdate();
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			Dict5(arg) {
				if (arg === 1) {
					this.ipagination3.current = 1;
				}
				var params = this.getQueryParams('3'); //查询条件
				params.projectId = this.model.projectId3;
				//自用设备统计
				getAction(`/statistics/buyerHome/getEquipmentPageList`, params).then((res) => {
					if (res.success) {
						this.shebeiList = res.result.records || res.result;
						if (res.result.total) {
							this.ipagination3.total = res.result.total;
						} else {
							this.ipagination3.total = 0;
						}
						this.$forceUpdate();
					} else {
						this.$message.warning(res.message)
					}
				})
			},
			getQueryParams(type) {
				//获取查询条件
				let sqp = {}
				if (this.superQueryParams) {
					sqp['superQueryParams'] = encodeURI(this.superQueryParams)
					sqp['superQueryMatchType'] = this.superQueryMatchType
				}
				var param
				if (type === '1') {
					param = Object.assign(sqp, this.queryParam, this.isorter1, this.filters1);
					param.field = this.getQueryField(type);
					param.pageNo = this.ipagination1.current;
					param.pageSize = this.ipagination1.pageSize;
				} else if (type === '2') {
					param = Object.assign(sqp, this.queryParam, this.isorter2, this.filters2);
					param.field = this.getQueryField(type);
					param.pageNo = this.ipagination2.current;
					param.pageSize = this.ipagination2.pageSize;
				} else if (type === '3') {
					param = Object.assign(sqp, this.queryParam, this.isorter3, this.filters3);
					param.field = this.getQueryField(type);
					param.pageNo = this.ipagination3.current;
					param.pageSize = this.ipagination3.pageSize;
				}
				return filterObj(param);
			},
			getQueryField(type) {
				//TODO 字段权限控制
				var str = "id,";
				if (type === '1' || type === '2') {
					if (this.columns && this.columns.length > 0) {
						this.columns.forEach(function(value) {
							str += "," + value.dataIndex;
						});
					}
				} else if (type === '2') {
					if (this.columns3 && this.columns3.length > 0) {
						this.columns3.forEach(function(value) {
							str += "," + value.dataIndex;
						});
					}
				}
				return str;
			},
			//分页1
			handleTableChange1(pagination, filters, sorter) {
				//分页、排序、筛选变化时触发
				if (Object.keys(sorter).length > 0) {
					this.isorter1.column = sorter.field;
					this.isorter1.order = "ascend" == sorter.order ? "asc" : "desc"
				}
				this.ipagination1 = pagination;
				this.Dict3();
			},
			handleTableChange2(pagination, filters, sorter) {
				//分页、排序、筛选变化时触发
				if (Object.keys(sorter).length > 0) {
					this.isorter2.column = sorter.field;
					this.isorter2.order = "ascend" == sorter.order ? "asc" : "desc"
				}
				this.ipagination2 = pagination;
				this.Dict4();
			},
			handleTableChange3(pagination, filters, sorter) {
				//分页、排序、筛选变化时触发
				if (Object.keys(sorter).length > 0) {
					this.isorter3.column = sorter.field;
					this.isorter3.order = "ascend" == sorter.order ? "asc" : "desc"
				}
				this.ipagination3 = pagination;
				this.Dict5();
			},
			//初始化
			init(source) {
				setTimeout(() => {
					this.initChar(source);
				}, 500);
			},
			//柱状图
			initChar(source) {
				const option = {
					legend: {},
					tooltip: {},
					dataset: {
						dimensions: ['product', '新入库', '出库数', '剩余库存'],
						source: []
					},
					grid:{
						height:'200px'
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {
						splitNumber: 5
					},
					series: [{
						type: 'bar',
						barWidth:'30',
						barGap:'140%',
						color: [
							'#0066cc'
						],
						label: {
							normal: {
								show: true, //开启显示
								position: 'top', //柱形上方
								textStyle: { //数值样式
									color: '#333'
								}
							}
						}
					}, {
						type: 'bar',
						barWidth:'30',
						barGap:'140%',
						color: [
							'#91cc75'
						],
						label: {
							normal: {
								show: true, //开启显示
								position: 'top', //柱形上方
								textStyle: { //数值样式
									color: '#333'
								}
							}
						}
					}, {
						type: 'bar',
						barWidth:'30',
						barGap:'140%',
						color: [
							'#fac858'
						],
						label: {
							normal: {
								show: true, //开启显示
								position: 'top', //柱形上方
								textStyle: { //数值样式
									color: '#333'
								}
							}
						}
					}]
				};
				option.dataset.source = source;
				var myChartTwo = this.$echarts.init(document.getElementById("charts")); //图标初始化\
				myChartTwo.setOption(option);
				window.onresize = function() {
					myChartTwo.resize();
				};
			},
		}
	}
</script>

<style lang="less" scoped>
	.txtmore {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
	}

	.flex-r {
		display: flex;
		flex-direction: row;
	}

	.flex-r-ac {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-r-js-ac {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.tit {
		font-size: 16px;
		color: #333;
		line-height: 30px;
		font-weight: bold;
		margin-right: 20px;
	}

	.tit2 {
		font-size: 18px;
		color: #333;
		line-height: 30px;
		font-weight: bold;
		margin-right: 20px;
	}

	.txt {
		font-size: 14px;
		color: #666;
		line-height: 30px;
		font-weight: 400;
	}

	.txt2 {
		font-size: 50px;
		color: #0066cc;
		line-height: 100px;
		font-weight: bold;
	}

	.txt3 {
		font-size: 13px;
		color: #666;
		line-height: 40px;
		font-weight: 400;
	}

	.more {
		font-size: 14px;
		color: #0066cc;
		line-height: 30px;
		font-weight: 400;
	}
</style>